<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>登录</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
	<style>
	input{
		outline:none;
	}

	</style>
</head>

<body style="background: white;">
	<div id="blank" class="header" v-cloak>
		<div v-back.tapmode class="back"></div>
	</div>
	<div class="login_content  login" id="app" style="padding: 0px;margin-bottom:0px;" v-cloak>
		<div class="login-title" >登录后更精彩</div>
		<div class="login_container">
			<div class="login-line" style="margin-top:60px;">
				<input type="tel" maxlength="11" ref="input1" v-model="phone" placeholder="请输入手机号">
				<img class="lookpwd-two" v-show="phone"  v-myclick="deletephone" v-src="'../../image/logon_del.png'">
			</div>
			<div class="login-line" v-show="!lookpwd">
				<input type="password" v-model="password" ref="input1" placeholder="请输入密码" required>
				<img src="../../image/big/modifyPwd_icon_close.png" v-show="password!=''" class="lookpwd" v-myclick="lookPassword" alt="">
				<!-- <span style="width:20%;border-left:1px solid #F2F2F2;padding:0px 5px">忘了密码</span> -->
			</div>
			<div class="login-line" v-show="lookpwd" >
				<input  type="text" v-model="password" ref="input1" placeholder="请输入密码" required/>
				<img src="../../image/big/modifyPwd_icon_open.png" class="lookpwd" v-myclick="lookPassword" alt="">
			</div>
		</div>
	<div class="user-agreement">注册代表同意<a style="color:#28A5DF">用户协议、隐私政策</a></div>
	<div class="regrist-button" style="margin-bottom:24px;" v-myclick="login">同意协议并登录</div>
	<div class="regrist-button-two" v-myclick="register">新用户注册</div>
	<div class="other-questions">
		<span v-myclick="codesing">验证码登录</span>
		<span v-myclick="my">无法登陆,<a style="color:#28A5DF;">申诉</a></span>
		<span v-myclick="forget">忘记密码</span>
	</div>
	<div class="wx-register">
		<div class="regrist-button-two" style="margin-bottom:0px;">
			<img v-src="'../../image/logon_wechat_1.png'" />
			微信快速登录
		</div>
	</div>
	</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>

<script>
	var vm,
		wx,
		aliTradePlus,
		qq,
		talkingData;
	apiready = function () {
		setBSImg();
		new Vue({
			el: '#blank'
		})
		wx = api.require('wx');
		// setBSImg();
		initApp();
		doubleBack();
		api.parseTapmode();
		addListeners();
	};

	function initApp() {
		// var isBigImg = Vue.BSImg == 'big';
		vm = new Vue({
			el: '#app',
			data: {
				phone: api.pageParam.phone ? api.pageParam.phone : '',
				password: '',
				code: '',
				appInstalled: {
					wx: true,
				},
				loginMode: 1,
				warn: false,
				messagePass: false,
				messagePass1: false,
				warnText1: '',
				warnText2: '',
				warnText3: '',
				lookpwd:false
			},
			computed: {
				imgNum: function () {
					if (this.appInstalled.wx && this.appInstalled.qq) {
						return 3;
					} else if (!this.appInstalled.wx && !this.appInstalled.qq) {
						return 1;
					} else {
						return 2
					}
				},
				imgOneWidth: function () {
					switch (this.imgNum) {
						case 2:
							return '50%';
						case 3:
							return '33.3%';
						case 4:
							return '25%';
					}
				},
			},
			methods: {
				my:function(){
					api.openWin({
					    name: 'page1',
					    url: '../user/usertwo.html',
					    pageParam: {
					        name: 'test'
					    }
					});

				},
				deletephone:function(){
					this.phone=''
				},
				forget:function(){
					api.openWin({
					    name: 'page1',
					    url: './pwdforget.html',
					    pageParam: {
					        name: 'test'
					    }
					});

				},
				codesing:function(){
					api.openWin({
					    name: 'codelogin',
					    url: './codelogin.html'
					});
				},
				register:function(){
					api.openWin({
					    name: 'register',
					    url: './setInfo.html'
					});
				},
				clearMessage: function(){
					this.warn = false;
					this.messagePass = false;
					this.warnText1 = '';
					this.warnText2 = '';
					this.warnText3 = '';
					this.phone = '';
					this.password = '';
					this.code = '';

				},
				codeMessage: function (a) {
					this.warnText1 = a;
					this.warn = true;
				},
				selectPage: function (index) {
					this.loginMode = index
				},
				login: function () {
					if (!this.phone) {
						vm.warn = true
						vm.warnText1 = '请输入正确的手机号'
						return;
					}
					if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
						vm.warn = true
						vm.warnText1 = '请输入正确的手机号'
						return false;
					}
					if (!this.password) {
						vm.warn = true
						vm.warnText3 = '请输入密码'
						return;
					}
					showProgress();
					var data = {
						phone: this.phone,
						password: this.password,
						jpush_token: getPrefs('jpush_token') || ''
					};
					if (hasPrefs('member_id')) {
						data.member_id = getPrefs('member_id');
					}
					var callback = function (ret) {
						console.log(JSON.stringify(ret))
						vm.login_init(ret.content, 'phone');
					};
					var errback = function (ret) {
						console.log(JSON.stringify(ret))
						vm.warn = true
						vm.warnText3 = '账号或密码错误'
					};
					pinet.post(URL.login, data, callback ,errback);
				},
				login_init: function (user, provider) {
					closeWin('index');
					setPrefs('user', user);
					setPrefs('token', user.token);
					setPrefs('imtoken', user.member_im_token);
					setPrefs('username', user.nickname);
					setPrefs('portrait', user.portrait);
					setPrefs('member_id', user.member_id);
					setPrefs('member_im_id', user.member_im_id);
					setPrefs('level_id', user.level_id);
					// 验证是否绑定微信
					if (!user.wx_openid) {
						vm.clearMessage()
						openWin('wxbind', { logintype: 2 ,wx_openid: user.wx_openid});
						return;
					}
					api.sendEvent({
						name: 'reLogin'
					});
					vm.clearMessage()
					api.openWin({
						reload: true,
						name: 'index',
						url: '../../index.html',
						hScrollBarEnabled: false,
						slidBackEnabled: false,
					});

				},
				bindAccount: function (params, data, provider) {
					data['jpush_token'] = getPrefs('jpush_token') || '';
					if (hasPrefs('member_id')) {
						data.member_id = getPrefs('member_id');
					}
					var callback = function (ret) {
						if (ret.content.result) {

							vm.login_init(ret.content, provider);
						} else {
							vm.clearMessage()
							openWin('../login/setInfo', params);
						}
					};
					pinet.post(URL.oauthLogin, data, callback);
				},
				login_wx: function () {
					wx.auth({}, function (ret, err) {
						if (!ret.status) {
						} else {
							wx.getToken({
								code: ret.code
							}, function (ret, err) {
								if (!ret.status) {
									// alert('获取授权 accessToken失败:' + err.code);
									api.toast({
										msg: '微信开小差了，请关闭app重新授权',
										duration: 3000,
										location: 'middle'
									});
									return
								} else {
									showProgress();
									wx.getUserInfo({
										accessToken: ret.accessToken,
										openId: ret.openId
									}, function (ret, err) {
										if (!ret.status) {
											// alert('获取用户信息失败:' + err.code);
										} else {
											var params = {
												nickname: ret.nickname,
												sex: ret.sex,
												portrait: ret.headimgurl,
												openid: ret.openid,
												unionid: ret.unionid || '',
												oauth: 'Weixin'
											};
											var data = {
												openid: ret.openid,
												oauth: 'Weixin',
												unionid: ret.unionid || ''
											};
											vm.bindAccount(params, data, 'Weixin');
										}
									});
								}
							});
						}
					});
				},

				// 验证码
				codelogin: function () {
					if (!this.phone) {
						vm.warn = true
						vm.warnText1 = '请输入正确的手机号'
						return;
					}
					if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
						vm.warn = true
						vm.warnText1 = '请输入正确的手机号'
						return false;
					}

					showProgress();
					var data = {
						phone: this.phone,
						verify_code: this.code,
						type: 9,
						jpush_token: getPrefs('jpush_token') || ''
					};
					if (hasPrefs('member_id')) {
						data.member_id = getPrefs('member_id');
					}
					var callback = function (ret) {
						vm.login_init(ret.content, 'phone');
					};
					var errback = function (ret) {
						if(ret.errcode == -101){
							vm.warn = true;
							vm.warnText1 = '手机号未注册';
							return;
						}else if(ret.errcode == -408){
							vm.warn = true;
							vm.warnText2 = '验证码错误';
							return;
						}else if(ret.errcode == -409){
							vm.warn = true;
							vm.warnText2 = '验证码已过期';
							return;
						}
						vm.warn = true;
						vm.warnText2 = '验证码错误';
					};
					pinet.post(URL.codelogin, data, callback , errback);
				},
				lookPassword: function(){
					this.lookpwd = !this.lookpwd;
				},
			},
			watch: {
				phone: function (phone) {
					if (phone.length > 10 && vm.code.length > 3) {
						this.messagePass = true
					} else {
						this.warnText1 = ''
						this.warnText2 = ''
						this.warnText3 = ''
						this.messagePass = false
					}
					if(phone.length == 11){
						if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
							vm.warn = true
							vm.warnText1 = '请输入正确的手机号'
							return false;
						}else{
							vm.warn = false
							vm.warnText1 = ''
						}
					}
				},
				code: function () {
					if (vm.phone.length > 9 && vm.code.length > 3) {
						this.messagePass = true
					} else {
						this.warnText1 = ''
						this.warnText2 = ''
						this.warnText3 = ''
						this.messagePass = false
					}
				},
				password: function () {
					if (vm.phone.length > 9 && vm.password.length > 5) {
						this.messagePass1 = true
					} else {
						this.warnText1 = ''
						this.warnText2 = ''
						this.warnText3 = ''
						this.messagePass1 = false
					}
				},
			},
		})
	}


	function addListeners() {
		//        api.addEventListener({
		//            name: 'viewappear'
		//        }, function () {
		//            var pageParam = api.pageParam;
		//            if (pageParam && pageParam.from) {
		//                closeWin(pageParam.from);
		//            }
		//        })
	}
	var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
	$(window).on('resize', function () {
		var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
		if (clientHeight > nowClientHeight) {
			$(".wx-login").hide()
		}
		else {
			$(".wx-login").show()
		}
	});
</script>

</html>
